<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <title>护照申请表格</title>
  <link rel="stylesheet" href="${ctx}/static/passport/assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="${ctx}/static/passport/assets/css/build_standalone.less">
  <link rel="stylesheet" href="${ctx}/static/passport/css/reset.css">
  <link rel="stylesheet" href="${ctx}/static/passport/css/common.css">
  <link rel="stylesheet" href="${ctx}/static/passport/css/approvallist.css">
  <link rel="stylesheet" href="${ctx}/static/passport/css/approvallist_bootstrap.css">
  <script type="text/javascript" src='${ctx}/static/passport/assets/js/jquery.min.js'></script>
  <script type="text/javascript" src='${ctx}/static/passport/assets/js/bootstrap.min.js'></script>
  <script type="text/javascript" src='${ctx}/static/passport/js/applicationprocess.js'></script>
  <script type="text/javascript" src="${ctx}/static/js/upload.js"></script>
  <link href="${ctx}/static/jquery-validation/1.11.1/validate.css" type="text/css" rel="stylesheet"/>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

  <script type="text/javascript">

    $().ready(function() {
      // 在键盘按下并释放及提交后验证提交表单
      $("#inputForm").validate({
        //debug:true,
        rules: {
          mobile: "required",
          code: "required",
          name: "required",
          cardNO: "required"
        },
        messages: {
          mobile: "请输入手机号",
          code: "请输入验证码",
          name: "请输入姓名",
          cardNO: "请输入证件编号"
        }
      });
    });


/*    var qntoken = "";
    $.getJSON("${ctx}/api/common/qiniu/token",function(json){
      qntoken = json.data.token;
    });
    //上传图片
    function uploadHead(){
      QiniuUpload({
        prefix:"user_",
        token:qntoken,
        successBack:function(json){
          if(json.key){
            var v = "http://img.dakaqi.cn/"+json.key
            $("#head").val(v);
            $("#headimgShow").attr("src",v);
          }else{
            alert("上传图片出错！");
          }
        }
      });
    }*/

    function sendCode()
    {
      var mobile = $('#mobile').val();
      var url = "${ctx}/passportApply/sendCode/"+mobile;
      $.getJSON(url,function(data){
        alert(data.message);
      });
    }
    function checkCode()
    {
      var mobile = $('#mobile').val();
      var code = $('#code').val();
      var url = "${ctx}/passportApply/checkCode/"+mobile+"/"+code;
      $.getJSON(url,function(data){
        if(data.code <0)
          alert(data.message);
      });
    }
  </script>

</head>

<body>
<div class='common_header_wrapper'>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="javascript:;">公益执照申请表格</a>
      </div>
      <!--
      <div class='common_headeruserinfo_wrapper'>
                    <span class='avatar'>
                        <img src="${ctx}/static/passport/img/timg.jpg">
                    </span>
        <label>申请人</label>
        -->
      </div>
    </div>
  </nav>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="common_process_wrapper main">
      <form id="inputForm" class="form-horizontal form" role="form" action="${ctx}/passportApply/next" method="post">
        <div class='form-group'>
          <label class="col-lg-2 control-label">手机号</label>
          <div class="col-lg-8">
            <input class='form-control' type="text" id="mobile" name="mobile" required="required">
          </div>
          <button type="button" onclick="javascriopt:sendCode();" class="btn btn-default col-lg-2">发送验证码</button>
        </div>
        <div class="form-group">
          <label class="col-lg-2 control-label">验证码</label>
          <div class="col-lg-10">
            <input type="text" class="form-control" id="code" name="code" onblur="javascriopt:checkCode();" required="required">
          </div>
        </div>
        <!--
        <div class="form-group">
          <label class="col-lg-2 control-label">照片</label>
          <div class="col-lg-10">
            <img alt="" src="${ctx}/static/assets/160x160.png" onclick="uploadHead();" id="headimgShow" width="160px">
            <input id="head" type="hidden" name="head" value="${ctx}/static/assets/160x160.png" required="required"/>
            <p class="help-block">你可以上传 JPG、JPEG、GIF、PNG 或 BMP 文件。</p>
            <p class="help-block">文件大小请控制在200K以内</p>
          </div>
        </div>
        -->
        <div class="form-group">
          <label class="col-lg-2 control-label">姓名</label>
          <div class="col-lg-10">
            <input type="text" class="form-control" id="name" name="name" required="required">
          </div>
        </div>

        <div class="form-group">
          <label class="col-lg-2 control-label">证件类型</label>
          <div class="col-lg-10">
            <select class='form-control' id="cardType" name="cardType">
              <option value="CID">身份证</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-2 control-label">证件编号</label>
          <div class="col-lg-10">
            <input type="text" class="form-control" id="cardNO" name="cardNO" required="required">
          </div>
        </div>

        <!--出生日期-->
        <div class="form-group">
          <label class="col-lg-2 control-label">出生日期</label>
          <div class="col-lg-3">
            <input id="birth_date" type="text" id="birthday" name="birthday" class="form-control">
          </div>
        </div>

        <div class="form-group">
          <label class="col-lg-2 control-label">性别</label>
          <div class="col-lg-10">
            <div class="form-group col-lg-2">
              <label>男</label>
              <input type="radio" name='sex' checked value="男">
            </div>
            <div class="form-group col-lg-2">
              <label>女</label>
              <input type="radio" name="sex" value="女">
            </div>
          </div>
        </div>


        <!--申请类别-->
        <div class="form-group">
          <label class="col-lg-2 control-label">申请类别</label>
          <div class="col-lg-10">
            <select class='applicationtype_select form-control' id="applyType" name="applyType">
              <option value="1">首次申领</option>
              <option value="2" data="reissue">换发护照</option>
              <option value="3" data="reissue">补发护照</option>
            </select>
          </div>
        </div>
        <div class="reissueform_wrapper">
          <label class="col-lg-2 control-label ">原因</label>
          <div class="col-lg-10">
            <div class="col-lg-5">
              <label class="radio-inline">
                <input type="radio" name="applyCase" checked="checked" value="1">原护照丢失
              </label>
            </div>
            <div class="col-lg-5">
              <label class="radio-inline">
                <input type="radio" name="applyCase" value="2">原护照被盗、损毁
              </label>
            </div>
          </div>
        </div>
        <!--紧急联系人-->
        <div class="form-group">
          <label class="col-lg-2 control-label">紧急联系人</label>
        </div>
        <!--<div class="form-group">-->
        <div class="form-group">
          <label class="col-lg-2 control-label">姓名</label>
          <div class="col-lg-3">
            <input type="text" class="form-control" id="contactName" name="contactName">
          </div>
          <label class="col-lg-2 control-label">电话</label>
          <div class="col-lg-4">
            <input  type="text" class="form-control" id="contactPhone" name="contactPhone">
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-2 control-label">住址</label>
          <div class="col-lg-9">
            <input type="text" class="form-control" id="contactAddress" name="contactAddress">
          </div>
        </div>
        <!--</div>-->
        <!--未成年人申请填写-->
        <div class="form-group">
          <label class="col-lg-3 control-label ">
            <input class="minor_checkbox pull-left" id='juvenile' type="checkbox">
            <label class='pull-left' for='juvenile'>未成年人申请填写</label>
          </label>
        </div>
        <!--监护人信息-->
        <div class="guardianinformation_wrapper">
          <label class="radio-inline">
            <input class='guardiantype' type="radio" data="guardian" name='guardiantype' id="guardiantype">监护人信息
          </label>
          <div class='guardian_wrapper'>
            <div class="form-group">
              <label class="col-lg-2 control-label">姓名</label>
              <div class="col-lg-3">
                <input type="text" class="form-control" disabled id="guardianName" name="guardianName">
              </div>
              <label class="col-lg-2 control-label">性别</label>
              <div class="col-lg-4">
                <div class="col-lg-3">
                  <label class="radio-inline">
                    <input type="radio" name="guardianSex" value="男" disabled checked>男
                  </label>
                </div>
                <div class="col-lg-2">
                  <label class="radio-inline">
                    <input type="radio" name="guardianSex" value="女" disabled> 女
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 control-label">监护人关系</label>
              <div class="col-lg-3">
                <input type="text" class="form-control" disabled id="guardianRelation" name="guardianRelation">
              </div>
              <label class="col-lg-2 control-label">电话</label>
              <div class="col-lg-4">
                <input  type="text" class="form-control" disabled id="guardianPhone" name="guardianPhone">
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 control-label">证件类型</label>
              <div class="col-lg-9">
                <select class='form-control' id="guardianCardType" name="guardianCardType" disabled>
                  <option value="CID">身份证</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 control-label">证件编号</label>
              <div class="col-lg-9">
                <input id="ID_number1" type="text" class="form-control" disabled id="guardianCardNo" name="guardianCardNo">
              </div>
              <!--监护单位信息-->
              <label class="radio-inline">
                <input class='guardiantype' type="radio" data="monitoringinstitutions" name='guardiantype' id="unit_info">监护单位信息
              </label>
            </div>
          </div>
          <div class="monitoringinstitutions_wrapper">
            <div class="form-group">
              <label class="col-lg-2 control-label">单位名称</label>
              <div class="col-lg-9">
                <input type="text" class="form-control" disabled id="guardianUnit" name="guardianUnit">
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 control-label" >组织机构代码</label>
              <div class="col-lg-9">
                <input id="guardianUnitCode" name="guardianUnitCode" type="text" value="" class="form-control" disabled>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group summitbtn">
          <div class="col-lg-offset-2 col-lg-10">
            <input type="submit" class="btn btn-primary btn-lg btn-block" value="下一步">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
</body>

<script type="text/javascript">
  $(function() {
    var application = {
      choosePassportType: function() {
        $('.applicationtype_select').change(function() {
          if ($(this).find('option:selected').attr('data')) {
            $('.reissueform_wrapper').show();
          } else {
            $('.reissueform_wrapper').hide();
          }
        });
        $('.minor_checkbox').click(function() {
          if ($(this).is(':checked')) {
            $('.guardianinformation_wrapper').show();
          } else {
            $('.guardianinformation_wrapper').hide();
          }
        });
        $('.guardiantype').click(function() {
          var $this = $(this);
          if ($this.attr('data') == 'guardian') {
            $('.monitoringinstitutions_wrapper').find('input').each(function() {
              $(this).attr('disabled', 'disabled');
            })
            $('.guardian_wrapper').find('input').each(function() {
              $(this).removeAttr('disabled');
            })
            $('.guardian_wrapper').find('select').each(function() {
              $(this).removeAttr('disabled');
            })
          } else if ($this.attr('data') == 'monitoringinstitutions') {
            $('.guardian_wrapper').find('input').each(function() {
              $(this).attr('disabled', 'disabled');
            })
            $('.guardian_wrapper').find('select').each(function() {
              $(this).attr('disabled', 'disabled');
            })
            $('.monitoringinstitutions_wrapper').find('input').each(function() {
              $(this).removeAttr('disabled');
            })
          }
        })
//				/*身份证验证*/
//			$("#ID_type").change(function() {
//					authentication();
//				})
        /*判断手机号是否为空*/
        $("#mobile").blur(function() {
          var phone_pattern = /^\d{11}$/;
          if (!phone_pattern.test($("#mobile").val())) {
            alert("手机号填写错误");
          }
        })
        /*监护人证件编号*/
        if($("#cardType").val()=="CID"){
          $("#cardNO").blur(function(){
            var pattern = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
            if(!pattern.test($("#cardNO").val())){
              alert("请填写正确的证件编号")
            }
          })
        }
        /*出生日期*/
        $("#birthday").blur(function(){
          var birth=/^\d{8}$/;
          if(($("#birthday").val().length!==8) && !(birth.test($("#birthday").val()))){
            alert("出生日期的长度必须为8位数");
          }
        })
      },
      init: function() {
        this.choosePassportType();
      }
    }
    authentication();
    application.init();
  })
  function authentication() {
    var pattern = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
    if ($("#ID_type").val() == "身份证") {
      $("#ID_number").blur(function() {
        var IDNumber = $("#ID_number").val();
        var birth_date = "";
        if (pattern.test(IDNumber)) {
          if (IDNumber.length == 18) {
            birth_date = IDNumber.substring(6, 14);
          }
          $("#birth_date").val(birth_date);
        } else {
          alert("请填写正确的身份证号码");
        }
      })
    }
    // ----监护人证件编号----
    if ($("#ID_type1").val() == "身份证") {
      $("#ID_number1").blur(function() {
        var IDNumber = $("#ID_number1").val();
        var birth_date = "";
        if (pattern.test(IDNumber)) {
          if (IDNumber.length == 18) {
            birth_date = IDNumber.substring(6, 14);
          }
          // $("#birth_date").val(birth_date);
        } else {
          alert("请填写正确的身份证号码");
        }
      })
    }
  }
</script>

</html>

